<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()" class="ant-advanced-search-form search">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>时间范围</nz-form-label>
        <nz-form-control>
          <nz-range-picker nzShowTime formControlName="rangePickerTime"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label nzRequired>输入框</nz-form-label>
        <nz-form-control [nzErrorTip]="inputErrTip">
          <input nz-input formControlName="inputForm" id="MACAddress" />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label>下拉框</nz-form-label>
        <nz-form-control>
          <nz-select formControlName="optionFrom" nzAllowClear>
            <nz-option *ngFor="let status of controlStatusList" [nzValue]="status.value" [nzLabel]="status.label">
            </nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">标签</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-tag [nzMode]="'closeable'" (nzOnClose)="handleCloseTag(tag)" *ngFor="let tag of tags; let i = index"
            nzTag>{{ tag }}</nz-tag>
          <nz-tag *ngIf="!inputVisible" class="editable-tag" nzNoAnimation (click)="showInputTag()">
            <i nz-icon nzType="plus"></i>
          </nz-tag>
          <input #inputElement nz-input formControlName="tagInput" nzSize="small" *ngIf="inputVisible" type="text"
            style="width: 78px" (blur)="handleInputConfirmTag()"
            (keydown.enter)="handleInputConfirmTag()" />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">重要性</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-rate formControlName="importance"></nz-rate>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-label nzRequired [nzSm]="6" [nzXs]="24" nzFor="email">多选框</nz-form-label>
        <nz-checkbox-group style="margin-top: 4px;" formControlName="checkboxGroup"></nz-checkbox-group>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="8">
      <nz-form-item>
        <nz-form-control>
          <input nz-input formControlName="inputNoLabel" id="inputNoLabel" placeholder="无labe输入框" />
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="24" class="search_area">
      <button nz-button [nzType]="'primary'" [disabled]="!validateForm.valid">提交</button>
      <button nz-button (click)="resetForm($event)">重置</button>
    </div>
  </div>
</form>

<div class="buttonDiv">
  <h3>清除</h3>
  <button nz-button (click)="clearFormRules()">清除表单所有校验</button>
  <button nz-button (click)="resetFormValue()">重置表单内容不会清除校验规则</button>
  <br>

  <h3>打印输出</h3>
  <button nz-button (click)="logFormValue()">打印表单项的值</button>
  <button nz-button (click)="getInputValue()">显示当前输入框内容</button>
  <button nz-button (click)="changeInputValue()">修改当前输入框内容为"input"</button>
  <button nz-button (click)="showTags()">显示标签组内容</button>

  <h3>禁用</h3>
  <button nz-button (click)="disableInput()">禁用formControlName为inputForm的输入框</button>
  <button nz-button (click)="enableInput()">解除禁用formControlName为inputForm的输入框</button>

  <h3>校验</h3>
  <button nz-button (click)="addRules()">为formControlName为inputForm的输入框添加输入最低5字符的校验规则</button>
  <button nz-button (click)="removeRules()">移除formControlName为inputForm的输入框的校验规则</button>
  <button nz-button (click)="clearFormRules()">清除表单所有校验</button>
  <button nz-button (click)="checkVerification('inputForm')">查看某一项的校验是否合规项【当前是校验输入框表单项】</button>
</div>
<div>
  <h1>获取禁用表单项内容值</h1>
  <p>
    1.输入框输入值； <br>
    2.点击打印表单项的值； <br>
    3.点击禁用按钮； <br>
    4.点击打印表单项的值；<br>
    5.对比两次打印输出会发现被禁用的表单项属性在validateForm中消失了。
  </p>
  <p>
    结论：无法使用this.validateForm.value获取被禁用表单项的值。 <br>
    解决方法：使用this.formGroup.getRawValue()。
  </p>
  <button nz-button (click)="getDisableFormValue()">使用getRawValue获取禁用表单项值</button>
</div>
